<template>
  <el-dialog title="试题预览"
             append-to-body
             :visible="value"
             @close="$emit('input',false)"
             class="dialog"
             width="65%">
    <el-divider>基本信息</el-divider>
    <el-row class="question-row">
      <el-col :span="10"><b>试题编号:</b>{{question.quest_num}}</el-col>
      <el-col :span="4"><b>试题类型:</b>{{ question.quest_type | showQuestType }} </el-col>
      <el-col :span="5"><b>归属学科:</b>{{ question.subject_name }} </el-col>
      <el-col :span="5"><b>归属目录:</b>{{ question.directory_name }} </el-col>
      <el-col :span="10"><b>标签信息:</b>
        <span v-for="item in question.tag_info"
              :key="item">{{item}}&nbsp;</span>
      </el-col>
      <el-col :span="4"><b>发布状态:</b>
        <el-tag size="small"
                v-if="question.show_state==1"
                type="success">上架</el-tag>
        <el-tag size="small"
                v-if="question.show_state==2"
                type="info">下架</el-tag>

      </el-col>
      <el-col :span="5"><b>审核人:</b>{{ question.check_username || '暂无' }} </el-col>
      <el-col :span="5"><b>审核状态:</b>
        <el-tag size="small"
                v-if="question.check_state==1"
                type="warning">待审核</el-tag>
        <el-tag size="small"
                v-if="question.check_state==2"
                type="success">通过</el-tag>
        <el-tag size="small"
                v-if="question.check_state==3"
                type="info">不通过</el-tag>
      </el-col>
      <el-col :span="10"><b>审核意见:</b>
        {{question.check_remarks || '暂无'}}
      </el-col>
      <el-col :span="4"><b>创建人:</b>{{ question.create_name }}</el-col>
      <el-col :span="5"><b>难度系数:</b>
        <span v-if="question.difficulty==1">简单</span>
        <span v-if="question.difficulty==2">中等</span>
        <span v-if="question.difficulty==3">较难</span>
      </el-col>
      <el-col :span="5"><b>发布时间:</b>{{ question.created_at | formatTime }} </el-col>
    </el-row>
    <el-divider>试题信息</el-divider>
    <el-row class="question-row">
      <el-col class="flex">
        <b>题干信息：</b>
        <el-link :underline="false"
                 type="primary">
          <div v-html="question.question"></div>
        </el-link>
      </el-col>
      <el-col class="flex">
        <b>选项信息：</b>
        <!-- 单选/多选/判断 -->
        <div v-if="question.quest_type!=4">
          <el-checkbox v-for="(item,index) in toParse(question.quest_options)"
                       :checked="item.is_true"
                       :key="index">
            {{item.code}} {{item.content}}
          </el-checkbox>
        </div>
        <!-- 简答 -->
        <div v-html="question.quest_answer"
             v-if="question.quest_type==4"></div>
      </el-col>
    </el-row>
    <el-divider>答案信息</el-divider>
    <el-row class="question-row">
      <el-col class="flex">
        <b>正确答案：</b>
        <el-link :underline="false"
                 type="primary">
          <div v-html="question.quest_answer"></div>
        </el-link>
      </el-col>
    </el-row>
    <el-row class="question-row">
      <el-col class="flex">
        <b>答案解析：</b>
        <div v-html="question.quest_remark"></div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: 'QuestionPreview',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    question: {
      type: Object,
      require: true
    }
  },
  methods: {
    toParse(val) {
      if (!val) return []
      return JSON.parse(val)
    }
  }
}
</script>

<style scoped lang="scss">
.question-row{
  line-height: 30px;
}
.question-row b{
  color: #999;
  font-weight: normal;
  margin-right: 5px;
}
.question-row .flex{
  display: flex;
}
.question-row .flex b{
  width: 72px;
}
.dialog{
  .el-dialog__body{
    padding-top: 5px;
  }
}
</style>
